<template>
  <TableBody>
    <template #header>
      <TableHeader ref="tableHeader" title="表格搜索" @search="onSearch" @reset-search="onResearch">
        <template #search-content>
          <a-form layout="inline" :model="{}">
            <a-form-item label="客户经理">
              <a-input
                allow-clear
                type="text"
                v-model="searchOptions.accountManager"
                placeholder="客户经理"
              />
            </a-form-item>
            <a-form-item label="客户名称">
              <a-input
                allow-clear
                type="text"
                v-model="searchOptions.customerName"
                placeholder="客户名称"
              />
            </a-form-item>
            <a-form-item label="客户 ID">
              <a-input-number
                allow-clear
                type="text"
                v-model="searchOptions.customerId"
                placeholder="客户 ID"
                hide-button
              />
            </a-form-item>
          </a-form>
        </template>
        <template #table-config>
          <div class="flex items-center space-x-4">
            <a-radio-group type="button" v-model="viewType">
              <a-radio v-for="view in VIEW_TYPE" :key="view.value" :value="view.value">
                {{ view.label }}
              </a-radio>
            </a-radio-group>
            <!-- <AddButton @add="addFlow">新增</AddButton> -->
          </div>
        </template>
      </TableHeader>
    </template>

    <template #default>
      <a-table
        table-layout-fixed
        v-if="viewType === ViewType.table"
        :bordered="false"
        :loading="table.tableLoading"
        :data="table.dataList"
        :pagination="pagination"
        :columns="columns"
      >
      </a-table>

      <a-row :gutter="[10, 10]" v-else-if="viewType === ViewType.card">
        <a-col
          :xs="24"
          :sm="12"
          :md="12"
          :lg="6"
          :xl="6"
          :xxl="6"
          :xxxl="4"
          v-for="record of table.dataList"
          :key="record.id"
          class="col-item"
        >
          <a-card hoverable>
            <template #cover>
              <img :src="imgURL + record.paymentScreenshot" />
            </template>
            <template #actions>
              <!-- <a-popconfirm
                v-if="Status[+record.status + 1]"
                :content="`点击确认流转:${Status[+record.status + 1]}?`"
                @ok="
                  updateFlow({
                    ...record,
                    status: +record.status + 1,
                  })
                "
              >
                <a-button type="text" size="small">
                  流转
                  <icon-skip-next-fill />
                </a-button>
              </a-popconfirm> -->
              <div>
                <bdi class="iconfont icon-bankcard" />
                {{ record.paymentBank }}
              </div>
            </template>

            <a-card-meta :title="record.customerName">
              <template #avatar> 客户经理（媒介）:{{ record.accountManager }} </template>
              <template #description>
                <ul>
                  <li
                    >{{ Status[record.status].title }}({{ Status[record.status]?.description }})</li
                  >
                  <li>充值金额: {{ numberFormat(CURRENCY).format(record.rechargeAmount) }} </li>
                  <li
                    >垫付金额: {{ numberFormat(CURRENCY).format(record.advancePaymentAmount) }}</li
                  >
                  <li
                    >实际支付金额:{{
                      numberFormat(CURRENCY).format(record.actualPaymentAmount)
                    }}</li
                  >
                  <li>备注: {{ record.remarks }}</li>
                </ul>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </template>

    <template #footer>
      <TableFooter ref="tableFooterRef" :pagination="pagination" />
    </template>
  </TableBody>

  <FlowAction v-model:visible="visible" @doRefresh="doRefresh" />
</template>
<script setup lang="ts">
  import { VIEW_TYPE, Status, ViewType, useFlow } from './index.hook.tsx'
  import FlowAction from './components/FlowAction.vue'
  import { numberFormat, CURRENCY } from '@/utils/format'

  const {
    visible,
    viewType,
    pagination,
    columns,
    table,
    addFlow,
    doRefresh,
    onSearch,
    onResearch,
    searchOptions,
    deleteItem,
    updateFlow,
  } = useFlow()

  const imgURL = import.meta.env.VITE_PHOTO_URL
</script>
